<template>
	<view class="xubao-detail">
		<view class="detail-content">
			<view class="van-cell-item">
				<van-cell title="客户姓名" :value="itemData.name ? itemData.name: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="车牌号" :value="itemData.lsn ? itemData.lsn : '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="车架号" :value="itemData.vin ? itemData.vin: '-'" />
			</view>
			<!-- 联系电话 -->
			<view class="detail-iscompleted">
				<view class="detail-completed-form">
					<view class="detail-completed-title">
						<text class="completed-title-text">联系电话</text>
					</view>
					<view class="detail-completed-radio-group" v-if="isCallPhoneShow"
						@click.stop="callPhone(itemData.tel)">
						<text class="phone-number">{{itemData.tel}}</text>
						<van-icon class="phone-icon" name="phone" />
					</view>
					<view class="detail-completed-radio-group no-phone" v-else>
						<text class="phone-number">-</text>
					</view>
				</view>
			</view>
			<view class="van-cell-item">
				<van-cell title="维系类型" :value="itemData.type ?itemData.type : '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="维系节点" :value="'M' + (itemData.node == 0 ? '' : itemData.node)" />
			</view>
			<view class="van-cell-item">
				<van-cell title="任务名称" :value="itemData.subject ? itemData.subject: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="维系结果" :value="itemData.result ? itemData.result: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="维系时间" :value="itemData.finishTime ? itemData.finishTime: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="操作人" :value="itemData.personLiable ? itemData.personLiable: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="备注" :value="itemData.remark ? itemData.remark: '-'" />
			</view>
		</view>
		<view class="height"></view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				workType: "",
				itemData: {},
				isCallPhoneShow: false,
				isSubmitResultShow: true,
			}
		},
		onLoad(options) {
			const itemData = uni.getStorageSync("xubaoHistoryItem");
			if (itemData.tel && itemData.tel != "0") {
				this.isCallPhoneShow = true;
			} else {
				this.isCallPhoneShow = false;
			}
			this.itemData = itemData;
		},
		methods: {
			// 拨打电话
			callPhone(phone) {
				if (phone.length != 11) {
					getApp().showToast('号码格式不对，无法拨出');
					return false;
				} else {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.xubao-detail {
		.height {
			height: calc(40px + 35pt);
		}

		.detail-content {
			margin: 20px;

			.detail-iscompleted {
				background-color: #fff;

				.detail-completed-form {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16px 0px 16px 17px;

					.detail-completed-title {
						display: flex;
						align-items: center;


						.completed-title-text {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.4);
						}
					}

					.detail-completed-radio-group {
						display: flex;
						align-items: center;

						.phone-number {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.8);
						}

						.phone-icon {
							font-size: 20px;
							color: #008aff;
							margin: 0 12px 0 5px;
						}

						&.no-phone {
							.phone-number {
								font-size: 14px;
								color: rgba(0, 0, 0, 0.8);
								margin: 0 15px 0 5px;
							}
						}
					}
				}
			}

			.van-cell-item {
				.van-cell {
					padding-top: 16px;
					padding-bottom: 16px;

					.van-cell__title {
						flex: 0.8;
						color: rgba(0, 0, 0, 0.4);
					}

					.van-cell__value {
						flex: 1.2;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				&:first-child {
					.van-cell {
						border-top-left-radius: 4px;
						border-top-right-radius: 4px;
					}
				}

				&:last-child {
					.van-cell {
						border-bottom-left-radius: 4px;
						border-bottom-right-radius: 4px;
					}
				}
			}


		}

		.result-btn {
			position: fixed;
			bottom: 40px;
			left: 15px;
			right: 15px;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
